<template>
  <div class="add-user">
    <div class="top-panel__box">
      <el-form :inline="true" :model="dataForm" size="small" ref="dataForm">
        <el-form-item prop="roleName" label="职务名称:">
          <el-input placeholder="" disabled v-model="dataForm.roleName" />
        </el-form-item>
        <el-form-item prop="roleCode" label="职务编码:">
          <el-input placeholder="" disabled v-model="dataForm.roleCode" />
        </el-form-item>
      </el-form>
    </div>
    <div class="top-panel__box">
      <el-form :inline="true" :model="userForm" size="small" ref="dataForm1">
        <el-form-item>
          <organization-cascader :flag="'id'" v-model="userForm.organizationId"></organization-cascader>
        </el-form-item>
        <el-form-item>
          <el-input clearable placeholder="员工姓名或工号" v-model="userForm.freeCondition"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">
            <fa-icon class="fa-search" />查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="success" size="mini" @click="submit" class="submit" plain>添加</el-button>
    <div class="DistBox" v-if="userForm">
      <el-row class="userSearchModule">
        <el-row class="table-top">
          <pagination :pageNum.sync="userForm.pageNum" :curSizes.sync="userForm.pageSize" :pageSizes="[10]" :total="parseInt(userList.total)" @getList="getList" />
        </el-row>
        <el-table :data="userList.list" class="tc-table" size="small" ref="multipleTable" @selection-change="userSelectionChange">
          <el-table-column type="selection" width="60" fixed="left" :selectable="selectable"></el-table-column>
          <template v-for="(column, index) in USER_LIST_THEAD">
            <el-table-column :prop="column.prop" :label="column.label" :formatter="column.formatter" :key="index" :show-overflow-tooltip="true">
            </el-table-column>
          </template>
        </el-table>
      </el-row>
      <el-row class="userDistModule">
        <el-row class="table-top">
          <pagination :pageNum.sync="userInForm.pageNum" :curSizes.sync="userInForm.pageSize" :pageSizes="[10]" :total="showUserInList.length" />
        </el-row>
        <el-table :data="showUserInList.slice((userInForm.pageNum-1)*userInForm.pageSize,userInForm.pageNum*userInForm.pageSize)" class="tc-table" size="small">
          <template v-for="(column, index) in USER_LIST_THEAD">
            <el-table-column :prop="column.prop" :label="column.label" :formatter="column.formatter" :key="index" :show-overflow-tooltip="true">
            </el-table-column>
          </template>
          <el-table-column prop="operation" label="操作" class-name="oper-col" :width="85">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" plain @click="onRemoveInUser(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
import OrganizationCascader from '@/components/organizationCascader'
import { mapState } from 'vuex'
import { USER_LIST_THEAD } from '../js/contant'
import { CONSTANT_OBJ } from '@/utils/constant'
import api from '../api'
export default {
  props: { roleId: String },
  components: {
    OrganizationCascader
  },
  data () {
    return {
      USER_LIST_THEAD,
      dataForm: {
        roleName: '',
        roleCode: ''
      },
      userForm: {
        pageNum: 1,
        pageSize: 10,
        organizationId: '',
        freeCondition: '',
        userStatusList: ['NORMAL', 'FROZEN']
      },
      userInForm: {
        pageNum: 1,
        pageSize: 10
      },
      showUserInList: [],
      userSelectionList: []
    }
  },
  mounted () {
    this.dataForm = { ...this.userData }
    this.$store.dispatch('common/queryUserData', this.userForm)
    this.getRoleDetail()
  },
  methods: {
    // 获取列表
    getList () {
      this.$store.dispatch('common/queryUserData', this.userForm)
    },
    // 获取职务详细系统
    getRoleDetail (val) {
      api.getRoleDetailData(this.roleId).then(res => {
        const { responseCode, data } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.dataForm = data || {}
          this.showUserInList = data.userList || []
        }
      }).finally(() => {
      })
    },
    userSelectionChange (val) {
      this.userSelectionList = []
      val.forEach((value) => {
        this.userSelectionList.push(value.userId)
      })
    },
    selectable (row, index) {
      const { userId } = row
      let userIdArr = []
      this.showUserInList.forEach(item => {
        userIdArr.push(item.userId)
      })
      let isInclue = userIdArr.includes(userId)
      return !isInclue
    },
    // 删除
    onRemoveInUser (row) {
      let userIds = []
      let data = this.showUserInList.filter(item => {
        return item.userId !== row.userId
      })
      data.forEach(item => {
        userIds.push(item.userId)
      })
      this.addUserData({ roleId: this.roleId, userIds: userIds })
    },
    // 添加
    submit () {
      console.log(this.showUserInList)
      if (this.userSelectionList.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择用户',
          duration: 2000
        })
        return false
      }
      let data = []
      this.showUserInList.forEach(item => {
        data.push(item.userId)
      })
      data = [...this.userSelectionList, ...data]
      this.addUserData({ roleId: this.roleId, userIds: data })
    },
    addUserData (data) {
      api.postRoleRelateUserData(data).then(res => {
        const { responseCode } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.userSelectionList = []
          this.$refs.multipleTable.clearSelection()
          this.getRoleDetail()
        }
      }).finally(() => {
      })
    }
  },
  computed: {
    ...mapState({
      userList: state => state.common.users
    })
  }
}
</script>
<style lang="less" scoped>
.submit {
  width: 100%;
  margin: 16px 0;
}
.distBox {
  position: relative;
  font-size: 0;
}
.table-top {
  margin: 20px 0 10px;
}
.userSearchModule,
.userDistModule {
  display: inline-block;
  width: 48%;
  vertical-align: top;
}

.userSearchModule {
  margin-right: 2%;
}
</style>

<style lang="less">
.add-user {
  .el-input.is-disabled .el-input__inner {
    color: #666;
  }
}
</style>
